<template>
    <view id="houseDesign" class>
        <view class="main_content">
            <view class="dhome_top pubimg">
                <img :src="`${imgUrl}design/freemodule/icon_oddernum.jpg`" />
            </view>
            <view class="breatning">
                <span class="span_left">仅剩下</span>
                <view class="breth">5</view>
                <view class="breth">6</view>
                <view class="breth">7</view>
                <span class="span_rignt">个免费名额</span>
            </view>
            <view class="offer_price">
                <view class="sub_form">
                    <!--  #ifdef H5 -->
                    <view class="atric_input">
                        <input placeholder="请输入房屋面积" type="number" :maxlength="4" v-model="areaValue" />
                        <span>m²</span>
                    </view>
                    <view class="atric_input">
                        <input placeholder="请输入手机号" type="number" :maxlength="11" v-model="mobileValue" />
                    </view>
                    <view class="artic_sub" @click="applyNow">{{btnTxt}}</view>
                    <!--  #endif -->
                    <!--  #ifdef MP-WEIXIN -->
                    <view class="atric_input">
                        <input placeholder="请输入房屋面积" type="number" :maxlength="4" v-model="areaValue" />
                        <span>m²</span>
                    </view>
                    <get-phone-number @cbFn="prebook">
                        <view class="artic_sub">{{btnTxt}}</view>
                    </get-phone-number>
                    <!--  #endif -->
                </view>
            </view>
            <view class="desin_press pubimg">
                <img :src="`${imgUrl}design/freemodule/icon_desinservice.jpg`" />
            </view>
            <view class="design_free pubimg">
                <img :src="`${imgUrl}design/freemodule/icon_designfree.jpg`" />
            </view>
            <view class="desin_homstyle pubimg">
                <img :src="`${imgUrl}design/freemodule/icon_homestyle.jpg`" />
            </view>
            <view class="design_add pubimg">
                <img :src="`${imgUrl}design/freemodule/icon_designadd.jpg`" />
            </view>
            <view class="design_total">
                <p class="total_sh">
                    累计服务
                    <span>1755</span> 位业主
                </p>
                <p class="total_sm">马上开启你的装修之旅吧</p>
                <view @click="rightnow" class="apply_immediately_btn">{{btnTxt}}</view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import { mobileReg, areaReg } from '@/utils/tools/validate'
import { getBasicUser } from '@/utils/auth'
import { submitReservation } from '@/api/shop'
import { setTimeout } from 'timers'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
export default {
	name: 'Designhome',
	components: {
		getPhoneNumber
	},
	data() {
		return {
			footerchange: true,
			areaValue: '',
			mobileValue: '',
			userid: '',
			user_name: '',
			imgUrl: this.$constant.imgUrl,
			owner_user_id: '',
			btnTxt: this.$constant.oemSource == 3 ? '报名申请' : '立即申请'
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	onLoad(option) {
		const { mobile, owner_user_id } = option
		// if (mobile) {
		// 	this.mobileValue = mobile
		// } else {
		// 	const wxMobile = uni.getStorageSync('wxMobile') || ''
		// 	this.mobileValue = mobile || wxMobile
		// }
		if (owner_user_id) {
			this.owner_user_id = owner_user_id
		}
		// this.owner_user_id = options.owner_user_id
		getBasicUser(this.owner_user_id).then(res => {

		})
	},
	mounted() {
		// this.user_name = this.$route.query.user_name
		// this.userid = this.$route.query.owner_user_id
	},
	methods: {
		showToast(title) {
			uni.showToast({
				title,
				icon: 'none'
			})
		},
		rightnow() {
			// $('html, body').animate(
			//     {
			//         scrollTop: 0
			//     },
			//     { duration: 500, easing: 'swing' }
			// )
			uni.pageScrollTo({
				scrollTop: 0
			})
		},
		prebook() {
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile) {
				return
			}
			if (!this.areaValue) {
				this.showToast('请输入房屋面积！')
				return
			} else if (!areaReg.test(this.areaValue)) {
				this.showToast('请输入正确的房屋面积！')
				return
			}
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))

			const params = {
				mobile_phone: mobile,
				prebook_source: '户型设计',
				square: this.areaValue,
				owner_user_id: this.owner_user_id
			}
			// if (this.currentQuery.share_user_id) {
			// 	params.share_user_id = this.currentQuery.share_user_id
			// }
			// if (this.currentQuery.p_share_user_id) {
			// 	params.p_share_user_id = this.currentQuery.p_share_user_id
			// }
			submitReservation(params).then(res => {
				this.btnTxt = '申请成功'
				uni.showToast({
					title: '申请成功',
					icon: 'success'
				})
			})
		},
		applyNow() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			const mobile = this.mobileValue
			const area = this.areaValue

			if (mobile.length === 0) {
				this.showToast('请输入手机号码！')
			} else if (mobile.length !== 11) {
				this.showToast('请输入完整的手机号码！')
			} else if (!mobileReg.test(mobile)) {
				this.showToast('请输入正确的手机号码！')
			} else if (area.length === 0) {
				this.showToast('请输入房屋面积！')
			} else if (!areaReg.test(area)) {
				this.showToast('请输入正确的房屋面积！')
			} else {
				const params = {
					mobile_phone: mobile,
					prebook_source: '户型设计',
					owner_user_id: this.owner_user_id,
					square: this.areaValue
				}
				submitReservation(params).then(res => {
					uni.showToast({
						title: '申请成功',
						icon: 'success'
					})
				})
			}
		}
	},
	/**
     * 用户点击右上角分享
     */
	onShareAppMessage: function(options) {
		const shareObj = {
			title: '0元享专业全屋设计【' + this.userInfo.nick_name + '】',
			path: `/pages/pagesHome/active/houseDesign?owner_user_id=${this.userInfo.user_id}`
			// title: this.userInfo.nick_name + this.userInfo.role_name,
			// path: `/pages/design/designCompany/indexNew?owner_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	}
}
</script>

<style lang="scss" scope>
#houseDesign {
    //   .pubimg img{margin-left: 1.5%;}
    .titlename {
        margin-left: 0;
    }
    .dhome_top {
        width: 100%;
        height: 538px;
    }
    .breatning .span_left {
        margin-left: 12%;
    }
    .desin_press {
        width: 100%;
        height: 306px;
    }
    .desin_homstyle {
        width: 100%;
        height: 1158px;
    }
    .design_free {
        width: 100%;
        height: 437px;
    }
    .design_add {
        width: 100%;
    }
    .design_add img {
    }
    .design_total {
        width: 100%;
        height: auto;
        margin-top: 150px;
        text-align: center;
        margin-bottom: 50px;
    }
    .design_total .apply_immediately_btn {
        display: inline-block;
        padding: 15px 50px;
        font-size: 36px;
        color: white;
        margin-top: 50px;
        border-radius: 10px;
        background: -webkit-linear-gradient(left, rgb(255, 144, 0), rgb(255, 102, 0));
    }
    .total_sh {
        font-size: 48px;
    }
    .total_sh span {
        font-size: 60px;
        color: #e96c69;
    }
    .total_sm {
        font-size: 30px;
        color: #ababab;
        margin-bottom: 25px;
        margin-top: 10px;
    }

    .breatning {
        width: 100%;
        height: 100px;
        margin-top: 20px;
        line-height: 100px;
        margin-left: 20px;
        font-size: 36px;
    }
    .breatning span {
        float: left;
    }

    .breatning .span_rignt {
        margin-left: 20px;
    }

    .offer_price {
        width: 100%;
        height: auto;
        background: white;
        margin-top: 20px;
        float: left;
    }

    .offer_price .line_title {
        width: 94%;
        height: 80px;
        float: left;
        margin-left: 3%;
        position: relative;
    }

    .offer_price .line_title img {
        width: 100%;
        height: 100%;
        float: left;
    }

    .offer_price .line_title:before {
        content: '';
        width: 100%;
        position: absolute;
        top: 50%;
        border-bottom: 2px solid #ddd;
    }

    .offer_price .line_title .line_prompt {
        text-align: center;
        position: absolute;
        top: 0;
        right: 14%;
        bottom: 0;
        left: 14%;
        font-size: 34px;
        background-color: #fff;
        line-height: 80px;
    }

    .sub_form .atric_input {
        width: 100%;
        height: 90px;
        background: #f5f5f5;
        font-size: 30px;
        line-height: 90px;
        color: #c9c9c9;
        border: 2px solid rgb(204, 204, 204);
        margin-top: 30px;
        border-radius: 10px;
    }

    .sub_form .atric_input input {
        float: left;
        width: 80%;
        height: 70px;
        line-height: 70px;
        padding-left: 20px;
        margin-top: 10px;
        border: none;
        background: #f5f5f5;
        color: rgb(153, 153, 153);
    }

    .sub_form .atric_input span {
        float: right;
        margin-right: 33px;
        color: black;
    }

    .offer_price .sub_form {
        width: 94%;
        height: auto;
        margin-left: 3%;
        float: left;
        margin-right: 3%;
    }

    .sub_form .artic_sub {
        margin-top: 24px;
        width: 100%;
        height: 120px;
        margin-bottom: 30px;
        line-height: 90px;
        height: 90px;
        border-radius: 10px;
        background: -webkit-linear-gradient(left top, rgb(255, 144, 0), rgb(255, 102, 0));
        text-align: center;
        font-size: 36px;
        color: white;
    }

    //   image {
    //       width: 100%;
    //       height: 100%;
    //   }
    img {
        width: 100%;
        height: 100%;
    }

    .breth {
        height: 100px;
        width: 70px;
        float: left;
        margin-left: 15px;
        text-align: center;
        color: white;
        border-radius: 2px;
        font-size: 60px;
        background-image: url('https://wximg.meijiabang.com/hkds/miniapp/images/design/freemodule/icon_breatning.png');
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; /*关键帧名称*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
        -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
        -webkit-animation-duration: 3s; /*动画所花费的时间*/
    }

    @keyframes scaleDraw {
        0% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.3);
        }
        50% {
            transform: scale(1);
        }
        75% {
            transform: scale(1.3);
        }
    }
}
</style>
